<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 900px;
            height: 100px;
            background-color: #bfa;
        }
    </style>
</head>
<body>
    <!-- 

        在不同的屏幕,单位像素的大小是不同的,像素越小屏幕会越清晰
            24寸 1920*1080
            i6  4.7寸 750*1334

            智能手机的像素点 远远小于计算机的像素点

            问题: 一个宽度为900px的网页在i6中如何显示呢?

            默认情况下,移动端的网页都会将视口设置为980像素(css像素)
                以确保pc端网页在移动端正常反应,但是如果网页的宽度超过了980
                ,移动端的浏览器会自动对网页缩放以完整显示网页


        所以基本大部分的pc端网站都可以在移动端中正常浏览,但是往往都不会有一个好的体验
            为了解决这个问题,大部分网站都会专门为移动端设置网页


     -->
     <div class="box1"></div>
</body>
</html>